<template>
	<view class="historycard flex-center">
		<view class="flex flex-col flex-1">
			<view class="flex">
				<view :class="'tag tag'+([1,3].includes(history.type)?'add':'')">
					{{history.title}}
				</view>
			</view>
			<view class="content">
				{{history.reason}}
			</view>
			<view class="time">
				{{history.created_at}}
			</view>
		</view>
		<view :class="'number number'+([1,3].includes(history.type)?'add':'')">
			{{[1,3].includes(history.type)?'+':'-'}}{{history.money.split('.')[0]}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			history: {
				type: Object,
				default () {
					return {
						created_at: "2023-05-08T14:11:16.000000Z",
						id: 1,
						money: "5.00",
						reason: "系统赠送5个次数",
						title: "系统赠送",
						type: 3,
						user_id: 1
					}
				}
			}
		}
	}
</script>

<style scoped>
	.historycard {
		margin: 0 30upx;
		margin-top: 30upx;
		width: 690upx;
		background-color: #e1eeff;
		border-radius: 30upx;
		padding: 29upx 39upx 25upx 36upx;
		box-sizing: border-box;
	}

	.number {
		font-size: 34upx;
		font-weight: 400;
		color: #F7904C;
		line-height: 100upx;
	}

	.tag {
		background: #F7904C;
		color: #fff;
		font-size: 28upx;
		border-radius: 10upx;
		padding: 10upx;
	}

	.numberadd {
		color: #28C764;
	}

	.tagadd {

		background: #28C764;
	}

	.content {
		margin-top: 24upx;
		margin-bottom: 30upx;
		font-size: 28upx;
		font-weight: 400;
		color: #999999;
	}

	.time {
		font-size: 28upx;
		font-weight: 400;
		color: #999999;
	}

	/* ------- */
	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-1 {
		flex: 1;
	}

	.align-center {
		align-items: center;
	}

	.align-start {
		align-items: flex-start;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-start {
		justify-content: flex-start;
	}
</style>